<template>
  <transition name="fade">
    <div class="datepiker-main" :style="mainStyle" v-if="isShow" @click='btnCancel'>
      <div class="datepiker-cover">
        <div class="pd-select-box" :style="pdStyle" @click='pdClick'>
          <div class="pd-select-box-title" :style="titleStyle">
            <span class="box-title-span" @click='btnCancel' :style="topCancel">取消</span>
            <span></span>
            <span class="box-title-span" @click='btnOk' :style="topOK">确定</span>
          </div>
          <div class="pd-select-box-time">
            <pd-select-item :listData="provinceLists" v-model="province" :value="province" type="line" @ttt="updataProvince"></pd-select-item>
            <pd-select-item :listData="cityLists" v-model="city" :value="city" type="line"></pd-select-item>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import pdSelectItem from './selectitem.vue'

  export default {
    components: {pdSelectItem},
    data() {
      return {
        isShow: false,
        mainStyle: {},
        pdStyle: {},
        titleStyle: {},
        topCancel: {},
        topOK: {},
        blood: '',
        provinceLists: [],
        cityLists: [],
        province: {},
        city: {}
      }
    },
    methods: {
      btnOk() {
        sessionStorage.setItem("cityLists", JSON.stringify(this.cityLists))
        let json = {
          province: this.province,
          city: this.city
        }
        this.callback && this.callback(json)
        this.close()
      },
      btnCancel() {
        this.close()
      },
      close() {
        this.isShow = false
      },
      pdClick(event) {
        event.stopPropagation()
      },
      setinitDate(initProvince, initProvinceName, initCity, initCityName, provinceListsData) {
        let _this = this
        let sessioncityLists = JSON.parse(sessionStorage.getItem("cityLists"))
        _this.provinceLists = provinceListsData
        _this.cityLists = sessioncityLists
        _this.province.id = initProvince ? initProvince : 1046
        _this.province.shortName = initProvinceName ? initProvinceName : '安徽'
        _this.city.id = initCity ? initCity : 1150
        _this.city.shortName = initCityName ? initCityName : '亳州'
      },
      updataProvince (data) {
        let _this = this
        this.province = data
        _this.ACApi.getareaAreas({
          pid: _this.province.id
        },{
          onSuccess: res => {
            _this.cityLists = res.data.result
          },
          onFail: error => console.log(error)
        })
      }
    }
  }
</script>
<style scoped>
  .datepiker-main {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
  }

  .pd-select-box {
    width: 6rem;
    box-sizing: border-box;
    margin: 0 auto;
    background: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,.8);
    border-radius: 5px;
  }

  .pd-select-box-time {
    display: flex;
    margin: 0 auto;
  }

  .pd-select-box-title {
    box-sizing: border-box;
    width: 100%;
    height: .7rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #6197f7;
    color: #FFF;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .box-title-span {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 5px;
  }
  .box-title-span:active {
    background: rgba(255,255,255,.3);
  }
  .datepiker-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.3);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s ease;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
